<template>
    <div>
        <div v-if="contextMenu.visible" class="context-menu"
            :style="{ top: contextMenu.y + 'px', left: contextMenu.x + 'px' }">
            <div class="context-menu-item" @click="confirmDelete">
                删除帖子
            </div>
        </div>
        <el-card shadow="never">
            <div v-if="posts.length > 0" class="post-list">
                <div class="post-item p-4 border-bottom" v-for="post in posts" :key="post.id"
                    @click="viewPostDetail(post)" @contextmenu.prevent="showContextMenu($event, post)">
                    <div class="d-flex mb-3">
                        <el-avatar :size="40" src='/images/forum.png' 
    class="me-2" />
                        <div>
                            <h6 class="mb-0">
                                <span v-if="post.authorId === currentUserId" class="author-me">我</span>
                                <span v-else>{{ post.author || `用户 ${post.authorId}` }}</span>
                                <el-tag v-if="post.badge" type="primary" size="small" class="ms-1">{{ post.badge
                                    }}</el-tag>
                            </h6>
                            <div class="time-display">
                                <small class="text-muted">{{ post.timeAgo }}</small>
                                <small v-if="post.updatedAgo" class="text-muted updated-time-ago ms-2">· {{
                                    post.updatedAgo
                                    }}</small>
                            </div>
                        </div>
                    </div>
                    <h5>{{ post.title }}</h5>
                    <p class="post-summary">{{ getSummary(post.content) }}</p>
                </div>
            </div>
            <el-empty v-else description="暂无帖子" />
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'; // 引入 ref 和生命周期钩子
import { useUserStore } from '@/stores/user.js'; // 1. 引入用户 store
const userStore = useUserStore(); // 2. 实例化 store
const props = defineProps({
    posts: {
        type: Array,
        required: true,
    },
    currentUserId: { // 新增此属性
        type: Number,
        default: null
    }
});

const emit = defineEmits(['view-post', 'delete-post']);
// 定义要删除的帖子和右键菜单的状态
const postToDelete = ref(null);
const contextMenu = ref({
    visible: false,
    x: 0,
    y: 0,
});

// 显示右键菜单的方法
const showContextMenu = (event, post) => {
    // 检查是否是当前用户自己的帖子
    if (post.authorId !== props.currentUserId && !userStore.isAdmin) {
        return;
    }

    contextMenu.value.visible = true;
    contextMenu.value.x = event.clientX;
    contextMenu.value.y = event.clientY;
    postToDelete.value = post; // 存储当前右键点击的帖子
};

// 隐藏右键菜单的方法
const hideContextMenu = () => {
    contextMenu.value.visible = false;
};

// 点击删除按钮时，隐藏菜单并向父组件发送事件
const confirmDelete = () => {
    if (postToDelete.value) {
        emit('delete-post', postToDelete.value.id);
    }
};

// 添加全局点击事件监听器，用于在点击页面其他地方时隐藏菜单
onMounted(() => {
    window.addEventListener('click', hideContextMenu);
});

// 组件卸载时移除监听器，防止内存泄漏
onUnmounted(() => {
    window.removeEventListener('click', hideContextMenu);
});

const viewPostDetail = (post) => {
    emit('view-post', post);
};

// 简单的文本摘要函数
const getSummary = (htmlContent) => {
    const text = htmlContent.replace(/<[^>]+>/g, ''); // 移除HTML标签
    return text.length > 100 ? text.substring(0, 100) + '...' : text;
};
</script>

<style scoped>
.post-item {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.post-item:hover {
    background-color: #fafafa;
}

.context-menu {
    position: fixed;
    z-index: 1000;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 5px 0;
}

.context-menu-item {
    padding: 8px 15px;
    cursor: pointer;
    font-size: 14px;
    color: #606266;
}

.context-menu-item:hover {
    background-color: #ecf5ff;
    color: #409eff;
}

.post-summary {
    color: #606266;
    font-size: 14px;
}

.border-bottom {
    border-bottom: 1px solid #e4e7ed;
}

.post-list .post-item:last-child {
    border-bottom: none;
}

/* 新增样式 */
.author-me {
    font-weight: bold;
    color: var(--el-color-primary);
}
</style>